<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <!-- 第一种写法：params对象直接传参，
        但是出了个问题 url显示不对 ：原因userkey和我们index中配置的:userkey 没对应上 才出现了url整个被替换掉了
          name属性，对应配置文件中name属性，params对象，key value结构，可以把它们整个传到路由后的页面
        -->
          <router-link :to="{name:'activelist',params:{userkey:user.userid}}">活动管理 | </router-link>
          <!-- 第二种写法，直接拼接字符串，拼接到url上面 -->
          <router-link :to="{path:'/hellokitty/active/'+user.userid}">活动管理2</router-link>
          </el-breadcrumb-item>
      <el-breadcrumb-item>
        <!-- 第一种写法 命名路由传参 通过name来传直接使用的是query直接传参  -->
          <router-link :to="{name:'activelist2',query:{user:user}}">活动列表 |</router-link>
        <!-- 第二种写法 通过path来传直接使用的是query直接传参  -->
          <router-link :to="{path:'/hellokitty/active2',query:{user:user}}">活动列表2</router-link>

          </el-breadcrumb-item>
      <el-breadcrumb-item>动画列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user:{
        userid:2
      }
    }
  },
}
</script>